<template>
    <view class="category">
        <search :hideBtn="true"></search>

        <view class="main">
            <scroll-view class="sidebar" scroll-y :style="'height:' + sidebarHeight + 'px'">
                <view class="item" :class="i === currentCategory ? 'active' : ''" v-for="(e, i) in categoryList" :key="i" @click="currentCategory = i">
                    <view></view>
                    <view>{{ e.name }}</view>
                    <view></view>
                </view>
            </scroll-view>

            <scroll-view class="content" scroll-y :style="'height:' + sidebarHeight + 'px'">
                <view class="item" v-for="e in currentCategoryList" :key="e.id">
                    <view class="header">
                        <text>{{ e.name }}</text>
                        <text>全部</text>
                    </view>
                    <view class="body">
                        <view class="goods" v-for="item in e.goods" :key="item.id" @click="goDetail(item.id)">
                            <image :src="item.picture"></image>
                            <view class="name">{{ item.name }}</view>
                            <view class="price">
                                <text>￥</text>
                                <text>{{ item.price }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { getCategoryList } from '@/api/category'

export default {
    onLoad() {
        this.sidebarHeight = uni.getSystemInfoSync().windowHeight
        this.getCategoryList()
    },
    data() {
        return {
            categoryList: [],
            currentCategoryList: [],
            sidebarHeight: 0,
            currentCategory: -1
        }
    },
    methods: {
        async getCategoryList() {
            this.categoryList = (await getCategoryList()).result
            this.currentCategory = 0
        },
        goDetail(id) {
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + id
            })
        }
    },
    watch: {
        currentCategory() {
            this.currentCategoryList = this.categoryList[this.currentCategory].children
        }
    }
}
</script>

<style scoped lang="scss">
.category {
    .main {
        display: flex;

        .sidebar {
            box-sizing: border-box;
            width: 180rpx;
            background-color: #F7F7F7;
            padding-top: 82rpx;

            .item {
                height: 88rpx;
                font-size: 28rpx;
                color: #333333;
                text-align: center;
                line-height: 88rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: all 0.2s;
                background-color: #F7F7F7;

                view:first-child {
                    width: 8rpx;
                    height: 30rpx;
                    background-color: #27BA9B;
                    border-radius: 0 4rpx 4rpx 0;
                    transition: all 0.2s;
                    opacity: 0;
                }

                view:last-child {
                    width: 8rpx;
                    height: 30rpx;
                }
            }

            .active {
                background-color: white;
                color: #27BA9B;

                view:first-child {
                    opacity: 1;
                }
            }

            ::v-deep .uni-scroll-view {
                width: inherit;
            }
        }

        .content {
            box-sizing: border-box;
            padding: 82rpx 20rpx 0;
            flex: 1;

            .item {
                margin-bottom: 20rpx;

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #262626;
                    font-size: 32rpx;
                    margin-bottom: 20rpx;

                    text:last-child {
                        color: #7F7F7F;
                        font-size: 24rpx;
                        margin-left: 20rpx;
                    }
                }

                .body {
                    display: flex;
                    flex-wrap: wrap;

                    .goods {
                        width: 30%;
                        margin-bottom: 30rpx;

                        image {
                            width: 160rpx;
                            height: 160rpx;
                            border-radius: 6rpx;
                        }

                        .name {
                            font-size: 24rpx;
                            color: #333333;
                            overflow: hidden;
                            display: -webkit-box;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }

                        .price {
                            color: #CF4444;
                            font-size: 26rpx;

                            text {
                                font-size: 18rpx;
                            }
                        }
                    }

                    .goods:nth-child(3n - 1) {
                        margin: 0 5%;
                    }
                }
            }

            ::v-deep .uni-scroll-view-content {
                padding-top: 20rpx;
                box-sizing: border-box;
            }
        }
    }
}
</style>
